import React, { ReactElement, useRef, useState, useEffect } from 'react';

interface Props {}

// 引入 api
import { getMenu, menu, addMenu } from '@/api/menu';

// 引入querystring
import qs from 'querystring';

type TableListItem = {
  id: string;
  title: string;
  key: string;
  icon: string;
  createTime: string;
};

// 引入 antd
import { Table, Switch, Space, Button, message, Tag, Tree } from 'antd';

// 引入 antd pro
import ProForm, {
  DrawerForm,
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
  QueryFilter,
  ProFormDatePicker,
} from '@ant-design/pro-form';

import { PlusOutlined } from '@ant-design/icons';

export default function AddMenu(props: Props): ReactElement {
  // 初始化一级菜单
  const [tableListDataSource, setTableListDataSource] = useState<
    Array<TableListItem>
  >([]);

  // 初始化
  useEffect(() => {
    initData();
  }, []);
  // 获取数据
  const initData = async () => {
    const res = await getMenu();
    setTableListDataSource(() => {
      return [...res.data.rows.children];
    });
  };

  // 树形控件
  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);

  // 树形菜单事件
  const onExpand = (expandedKeysValue: React.Key[]) => {
    console.log('onExpand', expandedKeysValue);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };

  const onCheck = (checkedKeysValue: any) => {
    console.log('onCheck', checkedKeysValue);
    setCheckedKeys(checkedKeysValue);
  };

  const onSelect = (selectedKeysValue: React.Key[], info: any) => {
    console.log('onSelect', info);
    setSelectedKeys(selectedKeysValue);
  };

  // 新增表单
  const formRef = useRef();

  // 右侧新增表单确认异步关闭
  const waitTime = (time: number = 100) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(true);
      }, time);
    });
  };

  return (
    <DrawerForm<{
      name: string;
      company: string;
    }>
      title="新增菜单"
      formRef={formRef}
      trigger={
        <Button type="primary">
          <PlusOutlined />
          新建表单
        </Button>
      }
      autoFocusFirstInput
      drawerProps={{
        forceRender: true,
        destroyOnClose: true,
      }}
      onFinish={async (values) => {
        await waitTime(2000);
        console.log(qs.stringify(values));

        const res = await addMenu(qs.stringify(values));
        if (res.status) {
          message.success('新增成功');
        } else {
          message.error('新增失败');
        }
        // 不返回不会关闭弹框
        return true;
      }}
    >
      <ProFormText
        name="menuName"
        width="md"
        label="菜单名称"
        placeholder="请输入名称"
        rules={[{ required: true, message: 'Please input your username!' }]}
      />
      <ProFormText
        width="md"
        name="path"
        label="菜单URL"
        placeholder="请输入名称"
        rules={[{ required: true, message: 'Please input your username!' }]}
      />
      <ProFormText
        width="md"
        name="component"
        label="组件地址"
        placeholder="请输入名称"
      />
      <ProFormText
        width="md"
        name="type"
        label="相关权限"
        placeholder="请输入名称"
      />
      <ProFormText
        width="md"
        name="vue"
        label="菜单图标"
        placeholder="请输入名称"
      />
      <ProFormText
        width="md"
        name="asd"
        label="菜单排序"
        placeholder="请输入名称"
      />
      树形：
      <Tree
        checkable
        onExpand={onExpand}
        expandedKeys={expandedKeys}
        autoExpandParent={autoExpandParent}
        onCheck={onCheck}
        checkedKeys={checkedKeys}
        onSelect={onSelect}
        selectedKeys={selectedKeys}
        treeData={tableListDataSource}
      />
    </DrawerForm>
  );
}
